<template>
  <div>
    <Myinput @sendsearch='shousearch'  @opendialog='opendialog' />
    <Mytable :res='res' @shuaxin='getinitData' @updateopendialog='updateopendialog' />
    <Mypage :page='page' :pageSize='pageSize' :total='total' :pageSizes='pageSizes' 
    @sendCurrentChange='receiveCurrentChange'
    @sendpageSize='receivepageSize'/>
    <Mydialog :btntype="btntype" v-if='show' @closedialog='closedialog' @shuaxin='shuaxin' :row='row' />
  </div>
</template>

<script>
import Myinput from './componets/Myinput.vue'
import Mytable from './componets/Mytable.vue'
import Mydialog from './componets/Mydialog.vue'
import {getinitHome} from '../../api/homeApi'
export default {
  data () {
    return {
      show:false,
      btntype:0,
      row:{},
      res:[],
      keyword:'',
      page:1,
      pageSize:20,
      total:0,
      pageSizes:[20,40,60,80]
    }
  },
  components: {
    Myinput,
    Mytable,
    Mydialog
  },
  mounted () {
    this.getinitData();
  },
  methods: {
    shousearch(val){
      this.keyword=val;
      this.getinitData();
    },
    receivepageSize(val){
      this.pageSize=val;
      this.getinitData();
    },
    receiveCurrentChange(val){
      this.page=val;
      this.getinitData();
    },
    getinitData(){
      getinitHome({keyword:this.keyword,page:this.page,pageSize:this.pageSize}).then(res=>{
        console.log(res);
        if(res.code==200){
          this.res=res.data;
          this.total=res.total;
        }
      })
    },
    opendialog(){
      this.show=true;//打开弹框
      this.btntype=0;
    },
    closedialog(){
      this.show=false;//关闭弹框
    },
    shuaxin(){
      this.getinitData();
    },
    updateopendialog(val){
      this.show=true;
      this.row=val;
      this.btntype=1;
    }
  }
}

</script>

<style>

</style>